<template>
    <!-- 直接发起经办合同 -->
    <div>
        <div class="header flexbetween">
            <div class="flexleft" style="flex:1">
                <div class="shutup pointer" @click="shutup">
                    <!-- 关闭 -->
                    <i class="el-icon-close" style="color: #fff;font-size: 24px;"></i>
                </div>
                <div class="margin-left1 margin-right3">
                    <img src="@/assets/img/layout/logo.png" alt="" class="logoimg">
                </div>
                <div class="title">直接发起</div>
            </div>
            <ul class="toptext flexcenter" style="flex:2">
                <li class="cicle focus margin-right1 ">1</li>
                <li class="colorfff margin-right1">设置文件与参与人</li>
                <span class="fgline margin-right1"></span>
                <li class="cicle margin-right1">2</li>
                <li class="colorhui margin-right1">设置签署位置并发起合同</li>
            </ul>
            <ul class="flexright" style="flex:1">
                <li class="margin-right1 colorfff pointer">保存草稿</li>
                <li class="margin-right1 colorfff btn1 pointer">直接发起</li>
                <li class="margin-right3 colorfff btn2 pointer">指定位置签署</li>
            </ul>
        </div>
        <div class="pagepadding">
            <!-- 合同基本信息 -->
            <div class="ffffff radius boxshadow mainpadding">
                <div class="flexleft">
                    <div class="leftline"></div>
                    <div class="titletext margin-right3">合同基本信息</div>
                    <div class="smalltext-box margin-right3">
                        <i class="el-icon-location"></i>
                        <span class="margin-left1">河南蓝海集团网络科技有限公司</span>
                    </div>
                    <div class="hui smalltext">剩余分数：<span class="redstar">0</span>份</div>
                </div>
                <div class="margin-top4 mainpadding bglan1 inline xuxian radius">
                    <el-button type="primary" icon="el-icon-upload2">添加签署文件</el-button>
                    <span class="smalltext margin-left1 hui">最多上传50份文件，单份文件小于30M</span>
                </div>
                <div class="margin-top3"></div>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-row :gutter="10">
                        <el-col :span="10">
                            <el-form-item label="合同名称" prop="name">
                                <el-input v-model="form.name" placeholder="请输入合同名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="是否保密">
                                <el-switch v-model="value1" active-text="是" inactive-text="否">
                                </el-switch>
                                <el-tooltip class="item" effect="dark" content="若设置为保密，仅您、任务参与方、抄送方、法人和指定人员可查看"
                                    placement="top-start">
                                    <i class="el-icon-warning el-input__icon" style="color: #c0c4cc;"></i>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- 设置签署方 -->
            <div class="ffffff radius boxshadow mainpadding margin-top2">
                <div class="flexleft">
                    <div class="leftline"></div>
                    <div class="titletext margin-right3">设置签署方</div>
                </div>
                <div class="margin-top3 flexbetween">
                    <div>
                        <el-radio v-model="radio" label="1" border>单方签署</el-radio>
                        <el-radio v-model="radio" label="2" border>双方签署</el-radio>
                        <el-radio v-model="radio" label="3" border>多方签署</el-radio>
                    </div>
                    <div>
                        <el-tooltip class="item" effect="dark" content="可设置签署方的签署顺序" placement="top-start">
                            <el-button @click="dialogVisible3=true">顺序设置</el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="可设置签署方的签署顺序" placement="top-start">
                            <el-button>自动添加</el-button>
                        </el-tooltip>
                    </div>
                </div>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    :header-cell-style="tableHeaderColor">
                    <el-table-column label="参与主体" width="150">
                        <template slot-scope="scope">
                            <div class="flexleft">
                                <el-dropdown>
                                    <!-- <span class="qiyeselect">
                                        企业<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </span> -->
                                    <span class="gerenselect">
                                        个人<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </span>

                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>个人</el-dropdown-item>
                                        <el-dropdown-item>企业</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <div class="tabtext margin-left1">签署方1<i class="el-icon-edit" style="color: #dcdfe6;"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="参与方式" width="100">
                        <template slot-scope="scope">签署</template>
                    </el-table-column>
                    <el-table-column label="参与方信息">
                        <template slot-scope="scope">
                            <el-row :gutter="20">
                                <el-col :span="7">
                                    <el-input placeholder="联系人" v-model="input3" class="input-with-select">
                                        <el-dropdown slot="append" @command="selectlxr">
                                            <i class="el-icon-user"></i>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item command='a'>从组织架构选人</el-dropdown-item>
                                                <el-dropdown-item command="b">从联系人选人</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                        <el-button icon="el-icon-user"></el-button>
                                    </el-input>
                                </el-col>
                                <el-col :span="7">
                                    <el-input placeholder="联系电话" v-model="input3" class="input-with-select">
                                        <el-tooltip slot="suffix" class="item" effect="dark" content="该手机号未在大鸿签实名认证"
                                            placement="top-start">
                                            <i class="el-input__icon el-icon-success"></i>
                                        </el-tooltip></el-input>
                                </el-col>
                                <el-col :span="7">
                                    <el-input placeholder="公司名称" v-model="input3" class="input-with-select">
                                        <el-tooltip slot="suffix" class="item" effect="dark" content="该企业已在大鸿签实名认证"
                                            placement="top-start">
                                            <i class="el-input__icon el-icon-success" style="color: #07b571;"></i>
                                        </el-tooltip></el-input>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="150">
                        <template>
                            <el-tooltip class="item" effect="dark" content="设置盖章方式和意愿认证方式" placement="top-start">
                                <el-button type="text">签署设置</el-button>
                            </el-tooltip>
                            <el-button type="text">清空</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="margin-top3">
                    <el-button disabled icon="el-icon-plus">添加企业</el-button>
                    <el-button disabled icon="el-icon-plus">添加个人</el-button>
                </el-row>
            </div>
            <!-- 选填项设置 -->
            <div class="ffffff radius boxshadow mainpadding margin-top2 xtx">
                <div class="flexleft">
                    <div class="leftline"></div>
                    <div class="titletext margin-right3">选填项设置</div>
                </div>
                <div class="margin-top3"></div>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-row :gutter="10">
                        <el-col :span="7">
                            <el-form-item label="签订截止日期" prop="name">
                                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-tooltip class="item" effect="dark"
                                content="过期未签后任务将作废，需要重新发起，系统会在到期前1天（系统默认）提醒参与人，可在个人用户中心修改提醒时间。" placement="top-start">
                                <i class="el-icon-warning el-input__icon" style="color: #c0c4cc;"></i>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <div class="flexstart">
                        <div class="tabtext margin-left2 margin-right3">合同抄送</div>
                        <div style="width: 90%;">
                            <div class="bglan1 mainpadding">
                                <div class="flexbetween" v-for="item in 4" :key="item">
                                    <div class="itemli margin-top1 flexleft">
                                        <div class="tabtext">企业：</div>
                                        <el-input placeholder="联系人" style="width:200px
                                    " v-model="input3" class="input-with-select  margin-right1">
                                            <el-dropdown slot="append" @command="selectlxr">
                                                <i class="el-icon-user"></i>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item command="a">从组织架构选人</el-dropdown-item>
                                                    <el-dropdown-item command="b">从联系人选人</el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                            <el-button icon="el-icon-user"></el-button>
                                        </el-input>
                                        <el-input placeholder="联系电话" style="width:200px;" v-model="input3"
                                            class="input-with-select margin-right1">
                                            <el-tooltip slot="suffix" class="item" effect="dark" content="该手机号未在大鸿签实名认证"
                                                placement="top-start">
                                                <i class="el-input__icon el-icon-success"></i>
                                            </el-tooltip></el-input>
                                        <el-input placeholder="公司名称" style="width:200px" v-model="input3"
                                            class="input-with-select">
                                            <el-tooltip slot="suffix" class="item" effect="dark" content="该企业已在大鸿签实名认证"
                                                placement="top-start">
                                                <i class="el-input__icon el-icon-success" style="color: #07b571;"></i>
                                            </el-tooltip></el-input>
                                    </div>
                                    <i class="el-input__icon el-icon-delete"></i>
                                </div>
                            </div>
                            <div class="margin-top3">
                                <el-dropdown split-button @command="selectlxr">
                                    添加企业
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="a">从组织架构选人</el-dropdown-item>
                                        <el-dropdown-item command="b">从联系人选人</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-dropdown split-button @command="selectlxr">
                                    添加个人
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="a">从组织架构选人</el-dropdown-item>
                                        <el-dropdown-item command="b">从联系人选人</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-tooltip class="item" effect="dark" content="最多可添加30人，抄送方不可签署，仅支持查阅，签署完成后会通知抄送方"
                                    placement="top-start">
                                    <i class="el-icon-warning el-input__icon" style="color: #c0c4cc;"></i>
                                </el-tooltip>
                                
                            </div>
                        </div>
                    </div>
                    <div class="flexleft">
                        <div class="tabtext margin-left2 margin-right3">合同附件</div>
                        <el-button icon="el-icon-paperclip" type="text" class="margin-right1">添加附件</el-button>
                        <el-tooltip class="item" effect="dark" content="至多50份文件，单份文件小于10M，仅用于查阅无需签署，附件不记入扣费套餐"
                            placement="top-start">
                            <i class="el-icon-warning el-input__icon" style="color: #c0c4cc;"></i>
                        </el-tooltip>
                    </div>
                </el-form>
            </div>

        </div>
        <!-- 联系人列表，联系人选人 -->
        <el-dialog title="联系人列表" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <el-input placeholder="请输入内容" suffix-icon="el-icon-search" style="width:300px" v-model="input1">
            </el-input>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @row-click="singleElection"
                style="width: 100%">
                <el-table-column align="center" width="55" label="选择">
                    <template slot-scope="scope">
                        <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                        <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="名称">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="手机号" width="120">
                </el-table-column>
                <el-table-column prop="address" label="所在企业" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="address" label="备注" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 组织架构列表，组织架构选人 -->
        <el-dialog title="选择人员" :visible.sync="dialogVisible2" width="40%" :before-close="handleClose">
            <div class="flexstart topline">
                <div class="leftmsg" style="flex:1">
                    <el-input placeholder="搜索姓名、昵称、手机号、工号" suffix-icon="el-icon-search" style="width:300px"
                        v-model="input1">
                    </el-input>
                    <div class="margin-top2">
                        <span class="tabletex pointer" @click="rylistShow = false">河南七进制网络科技有限公司</span>
                        <span class="hui" v-show="rylistShow"> / 未分配部门</span>
                    </div>
                    <ul class="scroll" style="height: 300px;" v-show="!rylistShow">
                        <li class="flexbetween pointer itembm" @click="rylistShow = true">
                            <p>未分配部门（5人）</p>
                            <p class="hui">下级</p>
                        </li>
                    </ul>
                    <ul class="scroll" style="height: 300px;" v-show="rylistShow">
                        <li class="flexleft pointer itembm" v-for="item in 15" :key="item">
                            <el-checkbox v-model="value1"></el-checkbox>
                            <div class="bglan2 colorfff margin-left1 namebox">嘉诚</div>
                            <div class="margin-left1">陈嘉诚（陈嘉诚）</div>
                        </li>
                    </ul>
                </div>
                <div class="rightmsg mainpadding" style="flex:1">
                    <div class="hui">请在左侧选择人员</div>
                    <el-tag v-for="tag in 10" :key="tag" closable type="info" style="margin:5px 5px 0 0">
                        陈嘉诚（陈嘉诚）
                    </el-tag>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 顺序设置 -->
            <SequenceSet :sequenceshow="dialogVisible3"/>
    </div>
</template>

<script>
import SequenceSet from "../template/components/sequenceSet.vue"

export default {
    components: { SequenceSet },

    data() {
        return {
            directInitiation:{
                
            },
            form: {
                name: "",
            },
            value1: false,
            rules: {
                name: [
                    { required: true, message: '合同名称不能为空', trigger: 'blur' },
                ]
            },
            radio: "1",
            tableData: [1, 1, 1, 1],
            dialogVisible: false,
            dialogVisible2: false,
            input3: "",
            templateSelection: "",//联系人选择单选单选勾选的id
            rylistShow: false,
            dialogVisible3:false,//顺序设置
        }
    },
    methods: {
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f8fa;color: #333;font-weight: 400;'
            }
        },
        // 联系人选择单选点击事件
        singleElection(row) {
            this.templateSelection = row.id
            this.checkList = this.tableData.filter((item) => item.id === row.id)
            console.log(`该行的编号为${row.id}`)
        },
        selectlxr(e) {
            // 从组织架构中选人
            if (e == "a") {
                this.dialogVisible2 = true
            }
            // 从联系人列表中添加
            if (e == "b") {
                this.dialogVisible = true
            }
        },
        handleClose(done) {
            done();
        },
        shutup() {
            this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '我要保存',
                cancelButtonText: '放弃修改'
            })
                .then(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '保存修改'
                    // });
                })
                .catch(action => {
                    if (action === 'cancel') {
                        this.$router.go(-1)
                    }
                    // this.$message({
                    //     type: 'info',
                    //     message: action === 'cancel'
                    //         ? '放弃保存并离开页面'
                    //         : '停留在当前页面'
                    // })
                });
        }
    }
}
</script>
<style lang="scss">
.el-input-group__append {
    background-color: #fff;
}

.xtx .el-form-item__label {
    width: 110px !important;
}

.xtx .el-form-item__content {
    margin-left: 110px !important;
}
</style>
<style lang="scss" scoped>
.topline {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.leftmsg {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 15px;
}

.rightmsg {
    padding: 20px 15px;

}

.itembm {
    padding: 10px 20px;
    font-size: 16px;
    color: #333;
}

.itembm:hover {
    background-color: #fafafa;
}

.namebox {
    padding: 10px 5px;
    border-radius: 5px;
}






.cicle {
    width: 30px;
    height: 30px;
    font-size: 16px;
    border-radius: 50%;
    line-height: 30px;
    background-color: #4e5969;
    text-align: center;
}

.focus {
    background-color: #fff;
}

.colorhui {
    color: #999;
}

.toptext {
    font-size: 14px;
}

.colorfff {
    color: #fff;
}

.fgline {
    width: 35px;
    height: 2px;
    background-color: #fff;
}

.header {
    background-color: #262729;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
}

.logoimg {
    width: 110px;
    height: 28px;
    margin-top: 5px;
}

.shutup {
    background-color: #3b4049;
    padding: 15px 20px;
}

.title {
    color: #fff;
    padding: 0 30px;
    border-left: 1px solid #fff;
    font-size: 20px;
}

.btn1 {
    padding: 3px 13px;
    border: 1px solid #fff;
    border-radius: 3px;
}

.btn2 {
    padding: 3px 13px;
    border: 1px solid #1063f1;
    border-radius: 3px;
    background-color: #1063f1;
}

.pagepadding {
    padding: 80px 300px 0;
}

.boxshadow {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
}

.leftline {
    margin-right: 15px;
    width: 3px;
    height: 18px;
    background-color: #1063f1;
}

.titletext {
    font-size: 18px;
}

.smalltext-box {

    background-color: #ebf2ff;
    border-radius: 10px;
    padding: 3px 10px;
}

.smalltext {
    font-size: 12px;
    color: #333;
}

.xuxian {
    border: 1px dashed #1063f1;
}

.qiyeselect {
    background-color: #ebf2ff;
    border: 1px solid rgba(16, 99, 241, .5);
    border-radius: 3px;
    color: #1063f1;
    padding: 0 3px;
}

.gerenselect {
    background-color: #fff6e6;
    border: 1px solid #e6970f;
    border-radius: 3px;
    color: #e6970f;
    padding: 0 3px;
}
</style>